<!-- 我的订单页面：所有跟用户有关的订单列表：购买的+卖出的 -->
<template>
  <div class="order-box">
    <div class="order-table">
      <el-table :data="currentPageData" border style="width: 100%">
        <el-table-column prop="petName" label="宠物名字" />
        <el-table-column prop="deposit" label="押金" />
        <el-table-column prop="adopterAddress" label="领养人地址" />
        <el-table-column label="订单状态">
          <template #default="{ row }">
            <el-tag :type="getOrderStatusType(row.orderStatus)" :style="getTagStyle(row.orderStatus)" plain
              disable-transitions>
              {{ row.orderStatus }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建订单时间">
          <template #default="{ row }">
            {{ new Date(row.createTime).toISOString().slice(0, 16).replace('T', ' ') }}
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12]"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
        />
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script setup lang="ts">
import { getUserOrderAPI } from "@/api/user"
import { useUserStore } from "@/stores/user"
import { onMounted, ref, computed } from "vue"

const userStore = useUserStore()
const userId = userStore.user.user_id

console.log("用户ID:", userId)
// 获取并且存储
const OrderData = ref([])
const total = ref(0) // 总数据量
const currentPage = ref(1) // 当前页码
const pageSize = ref(12) // 每页显示数量

const getUserOrder = async () => {
  const res = await getUserOrderAPI(userId)
  OrderData.value = res.data.items
  total.value = res.data.items.length
  console.log(OrderData.value)
}

onMounted(() => {
  getUserOrder()
})

// 计算当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return OrderData.value.slice(start, start + pageSize.value)
})



// 定义颜色状态  
const getOrderStatusType = (status) => {
  switch (status) {
    case '申请中':
      return 'primary'
    case '已取消':
      return 'info'
    case '申请失败':
      return 'danger'
    case '未发货':
      return 'warning'
    case '已发货':
      return 'default' // 类型保持默认  
    case '已完成':
      return'success'
    default:
      return 'default'
  }
}

const getTagStyle = (status) => {
  if (status === '已发货') {
    return { backgroundColor: '#bbe4de', color: '#fff' }
  }
  return {} // 其他状态无特殊样式  
}

// 分页器事件处理
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 切换每页数量后回到第一页
  getUserOrder() // 重新获取数据
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}
</script>

<style lang="scss" scoped>
.order-box {
  width: 970px;
  margin-left: 30px;
  // border: 1px solid black;
  padding: 15px;
  position: relative;
  background: #FAFAFA;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding: 10px;
  position: absolute;
}
</style>